<template>
	<view class="com-content">
		<view class="com-box">
			<view class="com-box-cen" @click="todetail('1')" v-if="proOrderStatu" :style="{width:img_width + 'px'}">
				<image class="com-box-cen-img" :src="img_pophc"></image>
				<view class="com-box-cen-txt">{{pophc}}</view>
			</view>
			<view class="com-box-cen" @click="todetail('2')"  v-if="popOrderStatu":style="{width:img_width + 'px'}">
				<image class="com-box-cen-img" :src="img_popxd"></image>
				<view class="com-box-cen-txt">{{popxd}}</view>
			</view>
			<view class="com-box-cen" @click="todetail('3')"  v-if="propOrderStatu" :style="{width:img_width + 'px'}">
				<image class="com-box-cen-img" :src="img_djxd"></image>
				<view class="com-box-cen-txt">{{djxd}}</view>
			</view>
			<view class="com-box-cen" @click="todetail('4')" :style="{width:img_width + 'px'}">
				<image class="com-box-cen-img" :src="img_jsb"></image>
				<view class="com-box-cen-txt">{{jsb}}</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
			mapGetters,
			mapActions
		} from 'vuex';
	export default {
		name: 'sel-logo',
		props: {
			proOrderStatu:{
				type:Boolean,
				default:false
			},
			popOrderStatu:{
				type:Boolean,
				default:false
			},
			propOrderStatu:{
				type:Boolean,
				default:false
			},
			img_pophc:{
				type:String,
				default:'/static/icon/icon-pophuace.png'
			},
			img_popxd:{
				type:String,
				default:'/static/icon/icon-popxiadan.png'
			},
			img_djxd:{
				type:String,
				default:'/static/icon/icon-daojuxiadan.png'
			},
			img_jsb:{
				type:String,
				default:'/static/icon/icon-jishiben.png'
			},
			pophc:{
				type:String,
				default:'POP画册'
			},
			popxd:{
				type:String,
				default:'POP下单'
			},
			djxd:{
				type:String,
				default:'道具下单'
			},
			jsb:{
				type:String,
				default:'记事本'
			}
		},
		data() {
			return {
				system:{
					w:0,
					h:0,
					scale:1,
					systemScale:1,
				},
			}
		},
		created() {
			this.getSystem()
		},
		computed: {
			...mapGetters(['userRole']),
			img_width() {
			  return (this.system.w)/4;
			}
		},
		methods: {
			/**
			 * @description: 获取设备信息
			 * @param {type} 
			 * @return {type} 
			 * @author: hch
			 */
			getSystem() {
				uni.getSystemInfo().then(res =>{
					let system = res[1]
					this.system.scale = 667 / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
					this.system.systemScale = system .windowWidth / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
					this.system.w = system.windowWidth;
					this.system.h = system.windowHeight;
				})
				
			},
			todetail(e){
				this.$emit('todetail',e)
			}
		}
	}
</script>

<style lang="scss">
	.com-content{
		display: flex;
		.com-box{
			width: 100%;
			height: 190rpx;
			display: flex;
			align-items: center;
			border-radius: 10rpx;
			color: $font-color-3;
			.com-box-cen{
				display: flex;
				flex-direction: column;
				align-items: center;
				.com-box-cen-img{
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 14rpx;
				}
				.com-box-cen-txt{
					font-size: 26rpx;
					font-weight: 400;
					line-height: 34rpx;
				}
				
			}
		}
	}
</style>
